<template>
  <div>
    <el-dialog title="新增出库信息" class="dialog-title" :visible.sync="addDialogVisible" width="60%">
      <el-row class="addRow">
        <el-col :span="6">选择产品:</el-col>
        <el-col :span="17">
          <el-input @focus="typeProductList" v-model="productInfo.name"></el-input>
        </el-col>
      </el-row>
      <!-- 标准化产品 -->
      <div v-show="state == 1">
        <el-row class="addRow">
          <el-col :span="6">所属公司:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.deptName"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">产品名称:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.name"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">应用领域:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.applicationField"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">产品描述:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.description"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">联系人:</el-col>
          <el-col :span="6">
            <el-input disabled v-model="productInfo.head"></el-input>
          </el-col>
          <el-col style="width: 130px; text-align: right; line-height: 40px; margin-right: 4px">联系人电话:</el-col>
          <el-col :span="7">
            <el-input disabled v-model="productInfo.phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">产品资费:</el-col>
          <el-col :span="17">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费级别">
                {{ productInfo.profitModel }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="资费金额">
                {{ productInfo.profitModel }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">成功案例:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.cases"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">产品亮点:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.highlights"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">附件信息:</el-col>
          <el-col :span="17">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="文件名">未知 </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <!-- 应用解决方案 -->
      <div v-show="state == 2">
        <el-row class="addRow">
          <el-col :span="6">所属公司:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.deptName"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">解决方案名称:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.name"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">应用领域:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.applicationField"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">解决方案描述:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.description"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">联系人:</el-col>
          <el-col :span="6">
            <el-input disabled v-model="productInfo.head"></el-input>
          </el-col>
          <el-col style="width: 130px; text-align: right; line-height: 40px; margin-right: 4px">联系人电话:</el-col>
          <el-col :span="7">
            <el-input disabled v-model="productInfo.phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">行业分析或趋势分析:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.profitModel"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">客户需求或痛点:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.type"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">方案优势对比及应用场景:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.highlights"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">案例介绍:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.cases"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">商务模式/合作模式:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.operationMode"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">市场前景预测（目标客户群体）:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.targetCustomers"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">附件信息:</el-col>
          <el-col :span="17">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="文件名">未知 </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <!-- 核心能力服务  -->
      <div v-show="state == 3">
        <el-row class="addRow">
          <el-col :span="6">所属公司:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.deptName"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">核心能力:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.name"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">应用领域:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.applicationField"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">亮点:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.description"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">联系人:</el-col>
          <el-col :span="6">
            <el-input disabled v-model="productInfo.head"></el-input>
          </el-col>
          <el-col style="width: 130px; text-align: right; line-height: 40px; margin-right: 4px">联系人电话:</el-col>
          <el-col :span="7">
            <el-input disabled v-model="productInfo.phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">附件信息:</el-col>
          <el-col :span="17">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="文件名">未知 </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <!-- 运营平台产品 -->
      <div v-show="state == 4">
        <el-row class="addRow">
          <el-col :span="6">所属公司:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.deptName"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">产品名称:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.name"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">应用领域:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.applicationField"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">平台描述:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.description"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">联系人:</el-col>
          <el-col :span="6">
            <el-input disabled v-model="productInfo.head"></el-input>
          </el-col>
          <el-col style="width: 130px; text-align: right; line-height: 40px; margin-right: 4px">联系人电话:</el-col>
          <el-col :span="7">
            <el-input disabled v-model="productInfo.phone"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">平台亮点:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.description"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">运营模式:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.operationMode"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">当前用户人数:</el-col>
          <el-col :span="17">
            <el-input disabled v-model="productInfo.currentUsers"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">2019年营收（万元）:</el-col>
          <el-col :span="5">
            <el-input disabled v-model="productInfo.income"></el-input>
          </el-col>
          <el-col :span="6" style="text-align: right; line-height: 40px; margin: 0 4px 0 31px">预计2020年营收（万元）:</el-col>
          <el-col :span="5">
            <el-input disabled v-model="productInfo.profit"></el-input>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">盈利模式:</el-col>
          <el-col :span="5">
            <el-input disabled v-model="productInfo.profitModel"></el-input>
          </el-col>
          <el-col :span="6" style="text-align: right; line-height: 40px; margin: 0 4px 0 31px"> 是否盈利: </el-col>
          <el-col :span="5" style="line-height: 40px; margin-left: 10px; font-size: 16px">
            <el-radio-group v-model="resource">
              <el-radio label="0" disabled>是</el-radio>
              <el-radio label="1" disabled>否</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row class="addRow">
          <el-col :span="6">附件信息:</el-col>
          <el-col :span="17">
            <el-descriptions direction="vertical" :column="2" border>
              <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="文件名">未知 </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>

      <el-row style="text-align: center; margin: 24px 0 10px 0; color: #409eff; font-size: 16px">
        <el-col :span="24" style="color: #337ab7">申请信息</el-col>
      </el-row>
      <el-row class="addRow">
        <el-col :span="6">审核人员:</el-col>
        <el-col :span="14">
          <el-select style="width: 400px" v-model.trim="sysAdminObj.name" placeholder="请输入关键字" filterable remote @change="changeVal" @remote-method="remoteSearch">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }} </span>
              <span style="float: right; color: #8492a6; font-size: 13px"> {{ item.deptName }}</span>
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="addRow">
        <el-col :span="6">描述:</el-col>
        <el-col :span="17">
          <el-input type="textarea" v-model="describe"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">保存</el-button>
        <el-button type="primary" @click="addBtn">保存并提交</el-button>
      </span>
    </el-dialog>
    <productList ref="productList" @productInfo="productInfoEmit"></productList>
  </div>
</template>

<script>
import { listForSysAdmin } from '@/api/userApi.js'

export default {
  data() {
    return {
      addDialogVisible: false,
      productTypeListTotal: 0,
      productListTableData: [],
      productInfo: {},
      describe: '',
      options: [],
      state: 0,
      resource: '0',
      sysAdminObj: {
        // deptId: '',
        // limit: 15,
        // page: 1,
        // searchData: '超级管理员',
        // deptId: 0,
        // timeLimit: '10',
        name: '',
      },
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    tablePagination: () => import('@/components/table_pagination.vue'),
    productList: () => import('./product_list.vue'),
  },
  created() {
    this.getSysAdmin()
  },
  mounted() {},
  methods: {
    addInfo() {
      this.addDialogVisible = true
    },
    // 新增出库信息获取产品类型列表
    typeProductList() {
      this.$refs.productList.typeProductList()
    },
    // 接收子组件传值
    productInfoEmit(data) {
      this.productInfo = data
      //   console.log(data, '得得得得')
      switch (data.productCategory) {
        case '标准化产品':
          this.state = 1
          break
        case '应用解决方案':
          this.state = 2
          break
        case '核心能力服务':
          this.state = 3
          break
        case '运营平台产品':
          this.state = 4
          break
      }
    },
    // 保存并提交
    addBtn() {
      this.addDialogVisible = false
      this.productInfo = {}
    },
    // 获取管理员列表
    getSysAdmin() {
      listForSysAdmin(this.sysAdminObj).then((res) => {
        let list = res.data.data
        // 默认显示前五个管理员
        for (let i = 0; i <= 5; i++) {
          this.options.push({
            value: list[i].name,
            label: list[i].name,
            deptName: list[i].deptName,
          })
        }
      })
    },
    // 下拉列表value值改变
    changeVal(val) {
      this.sysAdminObj.name = val
    },
    remoteSearch() {
      listForSysAdmin(this.sysAdminObj).then((res) => {
        this.options = []
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.addRow {
  margin: 10px 0;

  .el-col:nth-child(1) {
    text-align: right;
    margin-right: 10px;
    line-height: 40px;
  }
}
</style>
<style>
</style>
